<template>
  <div class="login-page">
    <div class="form-wrapper">
      <div class="logo-box">
        <div class="logo"></div>
      </div>
      <el-form
          ref="loginFormRef"
          label-position="top"
          :model="loginForm"
          label-width="auto"
          class="demo-ruleForm"
          status-icon>
        <el-form-item prop="userAccount" label-position="">
          <el-input size="large" v-model="loginForm.userAccount" placeholder="请输入账号">
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="userPassword" label-position="">
          <el-input size="large" type="password" show-password v-model="loginForm.userPassword" placeholder="请输入密码">
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <div class="submit-btn">
          <el-button size="large" :disabled="!loginForm.userAccount || !loginForm.userPassword" type="danger" :loading="loginLoading" @click="handleLogin">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import api from './api/index.js'
import common from "~/common/common.js";

const router = useRouter()
const loginLoading = ref(false)
const loginFormRef = ref()
const loginForm = ref({
  userAccount: '',
  userPassword: '',
})

onMounted(() => {

})


const handleLogin = async () => {
  try {
    await loginFormRef.value.validate()
    loginLoading.value = true
    api.login({
      userAccount: loginForm.value.userAccount,
      userPassword: loginForm.value.userPassword,
    }).then(async (res) => {
      loginLoading.value = false
      if (res.data && res.data.token) {
        ElMessage.success('登录成功')
        common.setLocalToken(res.data.token)
        router.replace('/ds')
      } else {
        common.setLocalToken('')
        ElMessage.error(res.message || '登录失败')
      }
    }).catch(e => {
      loginLoading.value = false
      ElMessage.error('登录异常')
    })
  } catch(e){
    console.log(e)
  }
}
</script>

<style scoped lang="scss">
.login-page{
  position: relative;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(to right bottom, #005ec4, #0071c2, #007db1, #00859a, #038b84);
  background-size: 100% 100%;
}
.form-wrapper{
  position: absolute;
  width: 378px;
  height: 325px;
  padding: 56px 66px 67px;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-image: linear-gradient(135deg, rgba(139, 198, 236, 0.45) 0%, rgba(149, 153, 226, 0.45) 100%);
  box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.15);
  border-radius: 10px;
  .logo-box{
    position: relative;
    padding-bottom: 20px;
    text-align: center;
    .logo{
      display: inline-block;
      width: 144px;
      height: 52px;
      background-image: url("./assets/images/ai-logo.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
  }
  .form-title{
    padding: 20px 0;
    text-align: center;
  }
  .userPassword-btn{
    position: absolute;
    right: 25px;
  }
  .submit-btn .el-button{
    width: 100%;
  }
}
.locale-box{
  position: absolute;
  right: 100px;
  top:100px;
}
</style>
